<template>
  <div class="set-params" @click="($event) => $event.stopPropagation()">
    <div class="description">
      <!-- 算子介绍 -->
      <div class="operator-intro" v-html="operatorInstructions"></div>
      <!-- 表单 -->
      <linkage-form
        :form-items="formItems"
        :conditions="conditions"
        :form-data="formData"
        :node-setting="true"
        @change="formItemValueChange"
      />
    </div>
    <!--  footer  -->
    <div class="footer-buttons">
      <div class="btn import-btn" @click="openEditOperator">编辑算子</div>
      <div class="btn import-btn" @click="refreshOperator">刷新</div>
      <div class="btn import-btn" @click="handleSubmit">确定</div>
      <div class="btn cancel-btn" @click="cancelChange">取消</div>
    </div>
  </div>
</template>

<script lang="ts">
/**
 * 自定义算子联动表单
 */
import { Vue, Component, Watch } from 'vue-property-decorator'
import DataViewStore from '@/store/modules/dataview'
import { cloneDeep } from 'lodash'
import LinkageForm from '@/components/studio/data/set-params/linkage-form/LinkageForm.vue'
import { loadJlabls } from '@/api/jupyter'

@Component({
  components: {
    LinkageForm,
  },
})
export default class CustomOperatorForm extends Vue {
  public operatorInstructions: string = ''
  public formItems: any = [] // 表单项
  public conditions: any = [] // 所有的联动条件
  public formData: { [key: string]: any } = {} // form 表单字段 及 值

  private get selectNode() {
    return DataViewStore.selectNode
  }

  /**
   * 初始化
   */
  public beforeMount() {
    this.initSet()
  }

  /**
   * 监听节点变化
   */
  @Watch('selectNode')
  private changeSelectNode(selectNode: any) {
    if (selectNode) {
      this.initSet()
    } else {
      this.formData = {}
    }
  }

  /**
   * 初始化
   * 节点的显示配置， 及其他
   */
  public initSet() {
    const { intro, formItem, condition, formData } = cloneDeep(
      this.selectNode.data.setParams[0]
    )
    this.operatorInstructions = intro.replaceAll(/\r\n/g, '<br/>')
    this.formItems = formItem
    this.formData = formData
    this.conditions = condition || []
  }

  /**
   * 参数修改
   */
  public formItemValueChange(value: any, key: string) {
    this.$set(this.formData, key, value)
  }

  /**
   * 打开编辑算子页面
   */
  public async openEditOperator() {
    DataViewStore.setEditOperatorParam({
      operatorId: this.selectNode.operatorId,
      taskId: this.selectNode.id,
      type: this.selectNode.type,
    })
    DataViewStore.setEditOperatorNode(this.selectNode)
  }

  /**
   * 刷新算子配置
   * 输出表下拉选择项
   */
  public async refreshOperator() {
    const parameters = {
      projectId: DataViewStore.projectId,
      id: this.selectNode.id,
    }
    await loadJlabls({ data: parameters })?.then((response: any) => {
      if (response.data.code === 100) {
        this.refreshPipelineNode()
      } else {
        this.$message.error('请求失败！')
      }
    })
  }

  /**
   * 刷新 pipeline 节点
   */
  public async refreshPipelineNode() {
    await DataViewStore.queryPipelineNodes({
      id: DataViewStore.projectId,
      pipelineId: DataViewStore.getPipelineId,
    })
  }

  /**
   * 确认编辑
   */
  public handleSubmit() {
    this.$emit('confirm', this.formData)
  }

  /**
   * 取消修改
   */
  public cancelChange() {
    this.initSet()
    this.$emit('cancel')
  }
}
</script>

<style lang="less" scoped>
@import '@/components/studio/data/set-params/setParams';

.operator-intro {
  margin-bottom: 16px;
}
</style>
